<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/schedule.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>门店排课</title>
    <meta charset="utf-8">
    <link href="${basepath}/css/viewcss/main/workschedule/scheduleform.css" rel="stylesheet" type="text/css"/>
    <style>
    	body {
			padding: 0;
			font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
			font-size: 12px;
		}
		.toolbar{
			height:30px;
			background-color:#F5F5F5;
			border-radius:4px;
			border: 1px solid #CCC;
			padding-top:8px;
		}
		.btndiv{
			text-align:center;
		}
		.btn{
			display: inline-block; 
			text-align:center;
			width: 60px;
			height: 20px;
			border-radius:4px;
			border: 1px solid #CCC;
			background: #F5F5F5;
			padding-top: 1px;
		}
		.querybtn{
			text-align:center;
			display: inline-block; 
			width: 60px;
			height: 18px;
			border-radius:4px;
			border: 1px solid #CCC;
			background: #F5F5F5;
			padding-top: 4px;
		}
    </style>
</head>
<script>
	
	var selectData;
	
	$(document).ready(function() {
		$("#querydate").val(new Date().format('yyyy-MM'));
	
		$('#calendar').fullCalendar({
			theme: true,
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			//defaultDate: '2015-02-12',
			editable: true,
			height:650,
			monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],    
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],    
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],    
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],    
			eventLimit: true, // allow "more" link when too many events
			buttonText: {    
                today: '今天',    
                month: '月',    
                week: '周',    
                day: '日'    
                //prev: '上一月',    
                //next: '下一月'    
            },
            dayClick: function(date, allDay, jsEvent, view) {  
            	$("#id").val("");
            	clearForm();
            	var startTime = new Date(date).format('yyyy-MM-dd hh:mm');
            	//var week = moment(date).format('dddd');
            	
            	if($(checkCourse).val()=="1"){
            		newZjPop(startTime);
            	}else if($(checkCourse).val()=="2"){
            		newTbPop(startTime);
            	}else{
            		layer.alert('请先选择课程类型');     
            	}
            },
            eventMouseover:function(event,jsEvent,view ) { 
            	if(event._selfData.isReleased==1){
            		selectData = event._selfData;
            		selectData.isReleased = 0;
            		$('#btnyy').text("取消发布");
            	}else{
            		selectData = event._selfData;
            		selectData.isReleased = 1;
            		$('#btnyy').text("发布");
            	}
					$('#showStudent').text("查看学生");

            	layer.tips($('#tipdiv').html(), this, {tips: [2,event.color],time: 4000});//
            },
            eventClick:function(calEvent, jsEvent, view){ 
            	var id = calEvent._selfData.id;
            	var course_type = calEvent._selfData.course_type;
            	if(course_type=='1'){//早教
            		showZjPop(id);
            	}
				if(course_type=='2'){//托班
					showTbPop(id);
            	}
            },
            //select: function(start, end) {
			//	var startTime = new Date();
			//	startTime.setTime(start);
			//	var endTime = new Date();
			//	endTime.setTime(end);
			//},
			//events: {
			//	url: '${path}/assist/queryScheduler',
			//	data : {querydate : $('#querydate').val() }
			//}
			events: function(start, end, timezone, callback) {
		        $.ajax({
		        	url: '${path}/assist/queryCustCourseApply',
		            dataType: 'json',
		            data:{querydate:$("#querydate").val()},
		            success: function(doc) {
		                var events = [];
		                $.each(doc,function(k,v) {
		                    events.push({
		                        title: v.title,
		                        start: new Date(v.start).format('yyyy-MM-dd hh:mm'),
		                        end: new Date(v.end).format('yyyy-MM-dd hh:mm'),
		                        content:v.content,
		                        color:v.color,
		                        backgroundColor:v.backgroundColor,
		                        borderColor:v.borderColor,
		                        textColor:v.textColor,
		                        _selfData:v
		                    });
		                });
		                callback(events);
		            }
		        });
		    },
		    eventAfterRender : function(event, element, view) {  
		    	var fstart  = new Date(event._selfData.start).format('hh:mm');  
		        var fend  = new Date(event._selfData.end).format('hh:mm');
		        var evtcontent = "";
		        if(event._selfData.course_type==1){
		        	evtcontent = '<div ><span>'+fstart+"/"+fend+"/"+event.title+'</span></div>';
		        }else{
		        	evtcontent = '<div ><span>'+fstart+"/"+event.title+'</span></div>';
		        }
		        element.html(evtcontent);
		    }
		});
	});
	
	var layIndex;
	
	var newZjPop = function(startTime){
		var url = speraoa.oaurl+"/ShopAdmin/isp/isp_entity/course_open_detail/editpage/course_open_detail_EditPageForYu";
		if(startTime){
			url += "?startTime="+startTime;
		}
		layIndex = layer.open({
			title:"早教排课",
			//type: 1,
			type: 2,
			fix: false,
	        //shadeClose: true,
	        maxmin: true,
	        area: ['850px', '470px'], //宽高
		    //content: $('#inlineForm'),
		    content: url,
		    cancel: function(index){
		    	reflashCal();
	        }
		});
	}
	
	var newTbPop = function(startTime){
		var url = speraoa.oaurl+"/ShopAdmin/isp/isp_entity/care_class_open/EditPage/care_class_open_EditPageForYu";
		if(startTime){
			url += "?startTime="+startTime;
		}
		layIndex = layer.open({
			title:"托班排课",
			type: 2,
			fix: false,
	        //shadeClose: true,
	        maxmin: true,
			area: ['850px', '470px'], //宽高
		    content: url,
		    cancel: function(index){
		    	reflashCal();
	        }
		});
	}
	
	var showZjPop = function(id){
		var url = speraoa.oaurl+"/ShopAdmin/isp/isp_entity/course_open_detail/editpage/course_open_detail_EditPageForYu";
		if(id){
			url += "?id="+id;
		}
		layIndex = layer.open({
			title:"早教排课",
			//type: 1,
			type: 2,
			fix: false,
	        //shadeClose: true,
	        maxmin: true,
	        area: ['850px', '470px'], //宽高
		    //content: $('#inlineForm'),
		    content: url,
		    cancel: function(index){
		    	reflashCal();
	        }
		});
	}
	
	var showTbPop = function(id){
		var url = speraoa.oaurl+"/ShopAdmin/isp/isp_entity/care_class_open/EditPage/care_class_open_EditPageForYu";
		if(id){
			url += "?id="+id;
		}
		layIndex = layer.open({
			title:"托班排课",
			type: 2,
			fix: false,
	        //shadeClose: true,
	        maxmin: true,
			area: ['850px', '470px'], //宽高
		    content: url,
		    cancel: function(index){
		    	reflashCal();
	        }
		});
	}
	
	//提交
	var releaseCourse = function(){
		if(selectData){
			$.ajax({
	            url: '${path}/course/releaseCourse',
	            //contentType: "application/json",
	            type:'POST', 
	            data: {id:selectData.id,course_type:selectData.course_type,isReleased:selectData.isReleased},
	            dataType: 'json',
	            success: function(doc) {
	            	layer.msg(doc.msg, {time: 3000, icon:6});
	            	if(doc.status==1){
		            	reflashCal();
	            	}
	            }
	        });
		}
	}
	
	var queryCalendar = function(){
		$('#calendar').fullCalendar( 'gotoDate',new Date($("#querydate").val()));
		reflashCal();
		//$('#calendar').fullCalendar('refetchEvents');
	}
	
	var reflashCal = function(){
		$('#calendar').fullCalendar('refetchEvents');
	}
	
	var clearForm = function(){
		//$("input[type=reset]").trigger("click");
		//$("#assist option").remove();
	}
	
	var courseClose = function(){
		//alert('asas');
	}
	var showStudent=function(){
		var course_open_detailID=selectData.id;
		var url ="${path}/course/studentList?course_open_detailID="+course_open_detailID;

		layIndex = layer.open({
			title:"学生列表",
			type: 2,
			fix: false,
			maxmin: true,
			area: ['475px', '600px'], //宽高
			content: url,
			cancel: function(index){
			reflashCal();
			}
	 	});
	}
</script>
<body class="page-body" >
	<div id="toolbar" class="toolbar">
		<label style="font-size:14px;margin-left:20px;">课表查询月份：</label>
		<input id="querydate" class="laydate-icon" onclick="laydate({istime: true, format: 'YYYY-MM'})" 
			style="width:200px;border-radius:4px;margin-left:10px;">
		<a href="#" onclick="queryCalendar()" class="querybtn">查询</a>
		<label style="font-size:14px;margin-left:100px;color:red">课程类型选择：</label>	
		<select name="checkCourse" id="checkCourse" style="width:150px;border-radius:4px;padding:2px" class="bootstrap-frm">
            <option value=''>请选择</option>
            <option value='1'>早教</option>
            <option value='2'>托班</option>
        </select>
	</div>
	
	<div id='calendar' style="width:98%;text-align:center;margin:0 auto;padding:5px"></div>
	
	<div style="display:none" id="tipdiv">
		<a href="#" class="btn"  onclick="releaseCourse()" id="btnyy"></a><br>
		<a href="#" class="btn"  onclick="showStudent()" id="showStudent">查看学生</a>
	</div>
</body>
</html>
